<template>
    <div id="friend_link">
        <el-form :inline="true" size="medium">
			<el-form-item>
				<el-select v-model="params.status" placeholder="状态" clearable @change="search">
					<el-option :value="item.value" :label="item.label" v-for="(item, index) in statusList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
				<el-button @click="otOperation()">添加链接</el-button>
			</el-form-item>
		</el-form>

        <el-table :data="list" stripe v-loading="loading">
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="url" show-overflow-tooltip align="center" label="链接"></el-table-column>
            <el-table-column prop="sort" align="center" label="排序"></el-table-column>
            <el-table-column prop="remark" align="center" label="备注"></el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <p v-if="scope.row.status==1">启用</p>
                    <p v-if="scope.row.status==2">停用</p>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                    <p>{{$common.getDate(scope.row.create_time)}}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="success" @click="otOperation(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="deleteInfo(scope.row.id)" style="margin-left: 5px;margin-top: 5px;">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination 
            background 
            @size-change="handleSizeChange" 
            @current-change="getList" 
            :current-page.sync="params.pageNo"
		    :page-sizes="[10, 20, 50, 100]" 
            :page-size="params.pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="total">
		</el-pagination>

        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            @close="closeDialog"
            width="600px"
            center>
            <div class="form">
                <div class="form-item">
                    <div class="label">名称：</div>
                    <div class="form-input">
                        <el-input v-model="form.name"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">链接：</div>
                    <div class="form-input">
                        <el-input v-model="form.url"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">排序：</div>
                    <div class="form-input">
                        <el-input v-model="form.sort"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">备注：</div>
                    <div class="form-input">
                        <el-input v-model="form.remark"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">状态：</div>
                    <div class="form-input">
                        <el-select v-model="form.status">
                            <el-option
                                label="启用"
                                :value="1">
                            </el-option>
                            <el-option
                                label="停用"
                                :value="2">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            list: [],
            statusList: [
                {
                    value: 1,
                    label: '启用'
                },
                {
                    value: 2,
                    label: '停用'
                }
            ],
            params: {
                pageNo: 1,
                pageSize: 10,
                isCount: true,
                status: '',
                tenantid:sessionStorage.getItem("tenantid")
            },
            form: {
                name: '',
                status: 1,
                sort: '',
                remark: '',
                url: ''
            },
            total: 100,
            loading: false,
            title: '新增',
            dialogVisible: false,
            id: ''
        }
    },
    created(){
        this.getList()
    },
    mounted(){},
    watch: {},
    methods: {
        deleteInfo(id){
            this.$confirm('此操作将永久删除该友情链接, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$request.post({
                    url: '/ReportApi/tenant/frienddel',
                    params: {
                        id
                    },
                    success:res => {
                        this.$message.success('操作成功')
                        this.getList()
                    }
                })
            }).catch(() => {
                this.$message.defaultMsg('取消操作')         
            });
        },
        otOperation(row){
            if(row){
                this.title = '修改'
            }else{
                this.title = '新增'
            }
            this.dialogVisible = true
            this.form = Object.assign({},this.form,row)
        },
        closeDialog(){
            this.form = {
                name: '',
                status: 1,
                sort: '',
                remark: '',
                url: ''
            }
        },
        handleSizeChange(e){
            this.params.isCount = true
            this.params.pageSize = e
            this.getList()
        },
        search(){
            this.params.isCount = true
            this.getList()
        },
        submit(){
            if(this.form.name == ''){
                this.$message.warning('请填写名字')
                return
            }
            if(this.form.sort == ''){
                this.$message.warning('请填写排序')
                return
            }
            let id,remark,url
            if(this.form.remark){
                remark = this.form.remark
            }else{
                remark = undefined
            }
            if(this.form.url){
                url = this.form.url
            }else{
                url = undefined
            }
            if(this.form.id){
                id = this.form.id
            }else{
                id = "kk"
            }
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.$request.post({
                url: '/ReportApi/tenant/friendupadteadd',
                params: {
                    tenantid:sessionStorage.getItem("tenantid"),
                    name: this.form.name,
                    sort: this.form.sort,
                    status: this.form.status,
                    remark,
                    url,
                    id
                },
                success: res => {
                    this.$message.success('操作成功')
                    this.dialogVisible = false
                    this.getList()
                },
                finally: () => {
                    loading.close()
                }
            })
        },
        getList(){
            this.loading = true
            this.$request.post({
                url:'/ReportApi/tenant/friendlist',
                params: this.params,
                success: res => {
                    this.list = res[0]
                    if (this.params.isCount) {
                        this.params.isCount = false
                        this.total = res[1]
                    }
                },
                finally: res => {
                    this.loading = false
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
#friend_link{
    .form{
        .form-item{
            display: flex;
            align-items: center;
            margin-top: 10px;
            .label{
                width: 100px;
                text-align: right;
                margin-right: 10px;
            }
            .form-input{
                width: 300px;
                .el-select{
                    width: 100%;
                }
            }
            .form_image{
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                i{
                    font-size: 28px;
                    color: #8c939d;
                    width: 100px;
                    height: 100px;
                    line-height: 100px;
                    text-align: center;
                }
            }
            .img_wrap{
                width: 100px;
                height: 100px;
                cursor: pointer;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .el-pagination{
        text-align: right;
        padding-top: 20px;
    }
}
</style>